<template>
    <div id="topic">
        <div class="hot-month-title">
            <h3>主题推荐</h3>
        </div>
        <div class="ul-box">
          <div class="ul-discountInfo">
            <ul>
              <li v-for='item in topiclist' @click='chossetopic'>
                <div class='Disinfo'>
                  {{ item }}
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="list">
            <div class='item'>
                <router-link to=''>
                    <img src="../../assets/place/hot1.jpg" alt="">
                    <p>12346</p>
                </router-link>
            </div>
            <div class='item'>
                <router-link to=''>
                    <img src="../../assets/place/hot1.jpg" alt="">
                    <p>12346</p>
                </router-link>
            </div>
            <div class='item'>
                <router-link to=''>
                    <img src="../../assets/place/hot1.jpg" alt="">
                    <p>12346</p>
                </router-link>
            </div>
            <div class='item'>
                <router-link to=''>
                    <img src="../../assets/place/hot1.jpg" alt="">
                    <p>12346</p>
                </router-link>
            </div>
            <div class='item'>
                <router-link to=''>
                    <img src="../../assets/place/hot1.jpg" alt="">
                    <p>12346</p>
                </router-link>
            </div>
            <div class='item'>
                <router-link to=''>
                    <img src="../../assets/place/hot1.jpg" alt="">
                    <p>12346</p>
                </router-link>
            </div>
        </div>
    </div>
</template>


<script type="text/javascript">
    
    export default {
        name:'topic',
        data(){
            return {
                topiclist:["俯瞰城市","怀旧时光","魅力夜色","神秘遗址","最爱小镇"]
            }
        },
        methods:{
            chossetopic(v){
                var topic = document.getElementById("topic");
                var topicli = topic.querySelectorAll(".Disinfo");
                // console.log(topicli);
                for(let i=0 ; i< topicli.length ;i++){
                    topicli[i].style.backgroundColor="white";
                    topicli[i].style.color="black";
                }
                v.target.style.backgroundColor='#11bf79'
                v.target.style.color='white'

            }
        }
    }


</script>


<style type="text/css" lang='less'>
    #topic{
        .hot-month-title{
            margin:3em 0 1.2em 0;
            padding:0 0.8em;
        }
        .ul-box{
            height:2.5em;
            overflow-y:hidden;
            .ul-discountInfo{
            height:3em;
            overflow: auto;          
            ul{
                height:3em;
                list-style-type: none;
                margin:0;
                width:600px;
                padding:0 1em;
                overflow-x: auto;
                overflow-y: hidden;
                li{
                    float:left;
                    white-space: nowrap;
                .Disinfo{
                  border:1px solid #f0f0f0;
                  border-radius:10px;
                  margin-right: 10px;
                  width:7em;
                  height:2.5em;
                  text-align:center;
                  line-height: 2.5em;
                  background-color: white;
                }
              }
            }
          }
        }
        .list{
            text-align:center;
            padding:5px;
            .item{
                float:left;
                width:30%;
                margin:5px;
                img{
                    box-shadow: 0 10px 10px 0 rgba(0,0,0,.15);
                    width:100%;
                    border-radius:8px;
                }
            }
        }
    }
</style>
